<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;height:200px;border: solid 1px black;margin: 20px auto;}
        .box .btns{border-bottom: solid 1px black;height:30px;}
        .box .btns .active{background: red;color:#fff;}
        .box .conts .item{height:170px;display: none;}
        .box .conts .item:nth-child(1){background: #399;}
        .box .conts .item:nth-child(2){background: #393;}
        .box .conts .item:nth-child(3){background: #993;}
        .box .conts .item:nth-child(4){background: #939;}
    </style>
</head>
<body>
    <div class="box">
        <div class="btns">
            <input type="button" value="按钮1">
            <input type="button" value="按钮2">
            <input type="button" value="按钮3">
            <input type="button" value="按钮4">
        </div>
        <div class="conts">
            <div class="item">内容1</div>
            <div class="item">内容2</div>
            <div class="item">内容3</div>
            <div class="item">内容4</div>
        </div>
    </div>
</body>
<script>

    var btns = document.querySelectorAll(".btns input");
    var conts = document.querySelectorAll(".conts .item");

    // 设置默认索引
    var index = 1;
    btns[index].className = "active";
    conts[index].style.display = "block";

    for(var i=0;i<btns.length;i++){
        // 给每个元素添加索引
        btns[i].setAttribute("abc", i);

        btns[i].onclick = function(){
            // 需求：获取点击元素的索引

            // 注意时机：
                // 循环执行的时机
                // 点击的时机
            // 当打开页面点击按钮时，循环早就结束了，所以，循环中的事件内，无法获取循环每次的计数器
            // console.log( i );
            // 获取点击的元素
            // console.log( this );
            // 根据当前元素，获取提前绑定好了的索引
            // console.log( this.getAttribute("abc") );

            // 先隐藏之前的索引对应的样式
            btns[index].className = "";
            conts[index].style.display = "none";

            // 修改新索引
            index = this.getAttribute("abc");

            // 根据新索引设置元素样式
            btns[index].className = "active";
            conts[index].style.display = "block";
        }
    }




    
</script>
</html>